import React from 'react';
import styles from './nav.less';


export default function CNav(props: any) {
  const { categoryList } = props;
  return (
  <div ref={props.navRef} className={styles.left_content}>
    <ul className={styles.list_box}>
      {categoryList && categoryList.map((item:any, index:number) => {
        return (<li id={`nav_${item.categoryId}`} 
          className={`${styles.item_box} ${index === 0 ? 'nav-active' : ''}`}
          onClick={() => props.tapNavItem(index)}
          key={index}>
            {item.categoryName}
            {item.categoryId === 'hot' ? <span className={styles.hot_icon}></span> : null}
        </li>)
      })}
    </ul>
</div>);
}
